<template>
  <t-card class="order-item" style="width: 100%" header-bordered>
    <!-- 头部 -->
    <template v-slot:header>
      <div class="header-left">
        <p>订单编号:</p>
        <span>{{ orderCode }}</span>
      </div>
      <div class="header-right">
        <v-icon name="weifukuan" width="1rem" height="1rem" v-if="payStatus === '未支付'"></v-icon>
        <v-icon name="yifukuan" width="1rem" height="1rem" v-if="payStatus === '已支付'"></v-icon>
        <v-icon
          name="yiquxiaodingdan"
          width="1rem"
          height="1rem"
          v-if="payStatus === '已取消'"
        ></v-icon>
        <v-icon
          name="dingdan-yituikuan"
          width="1rem"
          height="1rem"
          v-if="payStatus === '已退款'"
        ></v-icon>
        <v-icon name="weizhi" width="1rem" height="1rem" v-if="payStatus === '未知'"></v-icon>
        <span>{{ payStatus }}</span>
      </div>
    </template>
    <!-- 内容 -->
    <template v-slot:default>
      <div class="content-wrapper">
        <div class="goods-container">
          <!-- 商品图片 -->
          <div class="cover"><img v-lazy="imgUrl" alt="" /></div>

          <!-- 商品名称和属性规格 -->
          <div class="goods-info">
            <div class="name">{{ className }}</div>
            <div class="specs">{{ description }}</div>
            <div v-if="expireTime" class="expire-time">到期时间:{{ expireTime }}</div>
          </div>
        </div>
        <div class="price-time">
          <!-- 商品价格和支付方式 -->
          <div class="price-pay">
            <div class="price">
              <v-icon name="jiage" width="1rem" height="1rem"></v-icon> {{ price }}
            </div>
            <div class="pay-method" v-if="payType == '微信支付'">
              <v-icon name="weixinzhifu2" width="1rem" height="1rem"></v-icon>
            </div>
            <div class="pay-method" v-if="payType == '支付宝支付'">
              <v-icon name="zhifubaozhifu" width="1rem" height="1rem"></v-icon>
            </div>
          </div>

          <div class="price-time-info">
            <div class="time-info">创建时间：{{ createdTime }}</div>
            <!-- 如果已支付，显示支付时间 -->
            <div v-if="payTime" class="time-info">付款时间：{{ payTime }}</div>
            <div v-if="cancelTime" class="time-info">取消时间：{{ cancelTime }}</div>
          </div>
        </div>
      </div>
    </template>
    <!-- 底部 -->
    <template v-slot:footer>
      <div class="order-code-footer">
        <div class="footer-buttons">
          <t-button
            variant="text"
            theme="primary"
            @click="showAccountInfo(orderCode)"
            v-if="payStatus === '已支付' || payStatus === '已发货'"
            >查看详情</t-button
          >
          <t-button
            variant="text"
            theme="primary"
            v-if="payStatus === '未支付'"
            @click="showPay(orderCode)"
            >立即支付</t-button
          >
          <t-button
            variant="text"
            theme="primary"
            v-if="payStatus !== '已支付' && payStatus !== '已发货' && payStatus !== '未支付'"
            @click="showPay(orderCode)"
            >重新购买</t-button
          >
          <t-button
            variant="text"
            theme="primary"
            v-if="payStatus === '未支付'"
            @click="deleteOrder(orderCode)"
            >取消订单</t-button
          >
          <t-button
            variant="text"
            theme="primary"
            v-if="payStatus === '已支付' || payStatus === '已发货'"
            @click="twoBuy(classId,parentId,orderCode)"
            >立即续费</t-button
          >
        </div>
        <div class="footer-avatar">
          <t-avatar-group cascading="left-up" :max="2" v-if="totalPin != 0">
            <t-avatar>{{ pinId }}</t-avatar>
            <t-avatar>甲</t-avatar>
            <t-avatar>乙</t-avatar>
          </t-avatar-group>
        </div>
      </div>
    </template>
  </t-card>
</template>

<script setup>
const props = defineProps({
  cancelTime: {
    type: String,
    default: ''
  },
  className: {
    type: String,
    required: true
  },
  parentId: {
    type: Number,
    default: 0
  },
  createdTime: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  },
  expireTime: {
    type: String,
    default: ''
  },
  imgUrl: {
    type: String,
    default: ''
  },
  orderCode: {
    type: String,
    required: true
  },
  parentOrderCode: {
    type: String,
    default: ''
  },
  payStatus: {
    type: String,
    required: true
  },
  payTime: {
    type: String,
    default: ''
  },
  payType: {
    type: String,
    required: true
  },
  pinId: {
    type: Number,
    default: 0
  },
  price: {
    type: String,
    default: 0
  },
  refundTime: {
    type: String,
    default: ''
  },
  storeId: {
    type: Number,
    default: 0
  },
  subjectId: {
    type: Number,
    default: 0
  },
  classId: {
    type: Number,
    default: 0
  },
  totalPin: {
    type: Number,
    default: 0
  }
})

const emits = defineEmits(['show-account-info', 'show-pay', 'delete-order', 'two-buy'])

const showAccountInfo = () => {
  emits('show-account-info', props.orderCode)
}
const showPay = () => {
  emits('show-pay', props.orderCode)
}
const deleteOrder = () => {
  emits('delete-order', props.orderCode)
}
const twoBuy = () => {
  emits('two-buy', props.classId, props.parentId, props.orderCode)
}
</script>

<style scoped>
.header-right,
.header-left {
  font-size: 1rem;
  color: var(--text-title-color);
  display: flex;
  align-items: center;
}
.header-right span {
  color: #f03f24;
  margin-left: 0.25rem;
}

.order-item {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  transition: var(--transition-easeOut-2);
  box-shadow: var(--light-panel-shadow);
}

.order-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.content-wrapper {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1101px) {
  :deep(.t-card__body) {
    padding: 1rem;
    height: 116px;
  }
  .content-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .goods-container,
  .price-time {
    width: 50%;
  }

  .cover {
    margin-right: 1rem;
  }

  .goods-info {
    margin: 0;
  }
}

.goods-container {
  display: flex;
  align-items: center;
}

.cover {
  width: 100px;
  height: 100px;
  margin-right: 2rem;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.goods-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 10px 0;
  font-size: 1rem;
  color: var(--text-title-color);
}

.goods-info .name {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.goods-info .specs {
  margin-bottom: 10px;
}
.price-time {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price-time-info,
.price-pay {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  color: var(--text-title-color);
}

.price-pay .price {
  font-weight: bold;
}

.price-pay .pay-method {
  margin-top: 10px;
}

.price-time-info .time-info:not(:last-child) {
  margin-bottom: 5px;
}
.price-time-info .time-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.order-code-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-avatar {
  margin-left: auto;
}

.expire-time {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  :deep(.t-card__body) {
    padding: 1rem;
    height: 180px;
  }
  .goods-info {
    margin-top: 10px;
  }

  .footer-buttons {
    flex-direction: column;
  }

  .footer-buttons t-button {
    margin: 5px 0;
  }
  .footer-avatar {
    margin-right: 12px;
  }
  .footer-buttons :deep(.t-button--variant-text) {
    padding-left: 12px !important;
    padding-right: 4px !important;
  }
  :deep(.t-card__footer) {
    padding: 12px 0 !important;
  }
  :deep(.t-card__header) {
    display: block;
  }
}

:deep(.t-card__footer) {
  border-top: 1px solid var(--td-component-border);
}
</style>
